<template>
  <div>
    <el-dialog
      :visible.sync="showEdit"
      title="新增用户角色绑定"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      v-dialog-drag
      @close="handleClickDeal('cancel')"
      width="40%"
    >
      <el-form label-width="110px" :inline="true">
        <span style="font-family: cursive;font-size: large">当前位置:{{location}}</span><br/><br/>
        <el-row>
          <el-col :span="12">
            <el-form-item label="角色名称" prop="roleName">
              <el-input size="small" v-model="baseForm.roleName" :disabled="true">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="角色代码" prop="roleCode">
              <el-input size="small" v-model="baseForm.roleCode" :disabled="true">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row style="min-width: 350px">
          <el-col :span="24">
            <el-form-item label="选择绑定用户"
                          prop="meetingInviters"
            >
              <cmsSearchTree :defaultProps="defaultProps"
                             style="width: auto"
                             ref="userDetailTree"
                             :data="userTreeData"
                             :selectVal="selectValList"
                             @change="addMulTag"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="handleClickDeal('cancel')">取 消</el-button>
        <el-button size="medium" type="primary" :loading="isLoading"
                   @click="handleClickDeal('submit')">确 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import cmsSearchTree from '@/views/components/cmsSearchTree.vue'
  import crudRoles from '@/api/system/role'
  import msgUtil from '@/utils/msgUtil'

  export default {
    name: "user-detail",
    watch: {
      postDetail(value) {
        console.log('params', value)
        this.showEdit = value.show
        this.location = value.params.location
        this.baseForm.roleId = value.params.roleId
        this.baseForm.roleCode = value.params.roleCode
        this.baseForm.roleName = value.params.roleName
        this.getTreeInfoByRoleId(this.baseForm.roleId)
      },
    },
    components: {cmsSearchTree},
    props: {
      postDetail: {
        type: Object,
        default: {
          show: false,
          type: 'edit',
          params: {}
        }
      },
      userTreeData: {
        type: Array,
        default: []
      },
    },
    data() {
      return {
        selectValList: [],
        isLoading: false,
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        showEdit: false,
        formlabelWidth: '100px', // 表单左侧标题宽度
        location: '',
        baseForm: {
          roleId: '',
          roleCode: '',
          roleName: ''
        },
      }
    },
    methods: {
      handleClickDeal(type) {
        switch (type) {
          case 'submit':
            this.showEdit = false
            this.bindUserRole()
            this.selectValList = []
            break
          case 'cancel':
            this.showEdit = false
            this.selectValList = []
            break
        }
      },
      getTreeInfoByRoleId(roleId) {
        crudRoles.getTreeInfoByRoleId(roleId).then(res => {
          this.selectValList = res.data
        })
      },
      bindUserRole() {
        let userIds = []
        this.selectValList.forEach(item => {
          userIds.push(item.id)
        })
        let params = {
          userIds: userIds.join(','),
          roleId: this.baseForm.roleId,
        }
        crudRoles.bindUserRole(params).then(res => {
          this.$emit('getRoleUserInfo', this.baseForm.roleId)
          msgUtil.success2('新增绑定用户角色成功!')
        })
      },
      handleNodeClick(data) {
        console.log(data);
      },
      addMulTag(val) {
        this.$set(this, 'selectValList', val)
      },
    }
  }
</script>

<style scoped lang="scss">
  ::v-deep {
    .el-tree-node__content {
      min-width: 300px;
    }
  }
</style>
